<template>
  <div class="bgy-screen-table">
    <div class="bgy-screen-left" :style="{height: `${contentHeight}px`}">
      <zz-frame width="100%" height="100%">
        <div class="picture_table">
          <div class="picture_table_left">
            <div class="project-next" :style="{top: `${(contentHeight - 15) / 2}px`}" @click="prev" :class="{'project-not-allowed': imageIndex === 0}"><i class="iconfont icon-t-arrow"></i></div>
          </div>
          <div class="picture_table_content">
            <div class="picture_detail" :style="{height: `${controlHeight}px`}">
              <p>{{pictureImage.picName}}</p>
              <img alt="" :src="pictureImage.src"/>
            </div>
          </div>
          <div class="picture_table_right">
            <div class="project-next" :style="{top: `${(contentHeight - 15) / 2}px`}" @click="next" :class="{'project-not-allowed': imageIndex === picture.length - 1}"><i class="iconfont icon-r-arrow"></i></div>
          </div>
        </div>
      </zz-frame>
    </div>
    <div class="bgy-screen-right">
      <div class="button_table">
        <div class="button_table_left">
          <zz-frame width="100%" height="48px" class="mb20" :padding="[17, 17, 17, 17]" style="text-align: center">
            <div @click="back" >返回</div>
          </zz-frame>
        </div>
        <div class="button_table_center">
          <zz-frame  width="100%" height="48px" class="mb20" :padding="[17, 17, 17, 17]"  style="text-align: center">
            <div @click="delPic">删除</div>
          </zz-frame>
        </div>
        <div class="button_table_right">
          <zz-frame  width="100%" height="48px" class="mb20" :padding="[17, 17, 17, 17]"  style="text-align: center">
            <div @click="visible=true">编辑</div>
          </zz-frame>
        </div>
      </div>

      <zz-frame width="340px" :height="`${controlHeight-10}px`" :padding="[17, 17, 17, 17]">
        <table class="detail-table">
          <tr>
            <th>照片名称：</th>
            <td class="ellipsis" style="max-width: 200px" :title="pictureImage.picName">{{pictureImage.picName}}</td>
          </tr>
          <tr>
            <th>拍摄日期：</th>
            <td>{{shotTime}}</td>
          </tr>
          <tr>
            <th>拍摄人姓名：</th>
            <td>{{pictureImage.photographerName}}</td>
          </tr>
          <tr>
            <th>拍摄人电话：</th>
            <td>{{pictureImage.photographerTelephone}}</td>
          </tr>
        </table>
        <div class="list-content" v-bar :style="{height: `${controlHeight - 180}px`}">
          <div>
            <div class="list-child" :class="{'list-child-select': item.selected}" v-for="item in picture.images" @click="selectedPictureImage(item)">
              <p>{{item.picName}}</p>
              <img style="width: 340px; height: 230px" :src="item.src"/>
            </div>
          </div>
        </div>
        <!--<div class="list-next"><i class="iconfont icon-down-arrow"></i></div>-->
      </zz-frame>
    </div>

    <zz-dialog
      title='照片信息编辑'
      :visible = visible
      :is-blueground="true"
      style="background: rgba(12, 69, 95, 0.4); border-color: #136387"
      @confirm="confirm"
      @close="visible=false">
      <div style="width: 550px; height: 200px">
        <div class="com-table">
          <p class="com-left">照片名称</p>
          <div class="com-right">
            <input type="text" style="background: rgba(12, 69, 95, 0.4); border-color: #136387;width: 100%" v-model="picName" class="input-l270">
          </div>
        </div>

        <div class="com-table">
          <p class="com-left">拍摄日期</p>
          <div class="com-right">
            <zz-date type="day" inputClass="defaultWidth" background="rgba(12, 69, 95, 0.4)" :place="picDate" borderColor="#136387" @change=handlePicDate></zz-date>
          </div>
        </div>

        <div class="com-table">
          <p class="com-left">拍摄人姓名</p>
          <div class="com-right">
            <input type="text" v-model="manName" class="input-l270" style="background: rgba(12, 69, 95, 0.4); border-color: #136387;width: 100%" >
          </div>
        </div>

        <div class="com-table">
          <p class="com-left">拍摄人电话</p>
          <div class="com-right">
            <input type="text" v-model="manPhone" class="input-l270" style="background: rgba(12, 69, 95, 0.4); border-color: #136387;width: 100%" >
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
  import mixin from '../mixin'
  export default {
    name: 'screen-area',
    mixins: [mixin],
    data () {
      return {
        picture: {
          images: []
        },
        pictureImage: {},
        imageIndex: 0,
        pageNum: 1,
        pages: 1,
        picName: '',
        picDate: '',
        manName: '',
        manPhone: '',
        visible: false,
        shotTime: ''
      }
    },
    created () {
      this.getOneDayPics()
      this.picDate = this.$route.query.time
    },
    watch: {
      visible (val) {
        if (val) {
          this.picName = this.pictureImage.picName
          this.manName = this.pictureImage.photographerName
          this.manPhone = this.pictureImage.photographerTelephone
        }
      }
    },
    methods: {
      getOneDayPics (isReload) {
        let data = {
          'date': this.$route.query.time,
          'projectId': this.$route.query.pjId
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/videoPictureController/getOneDayPics`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.success) {
            if (res.data.data.length !== 0) {
              this.picture.images = res.data.data.map(x => {
                this.$set(x, 'src', '')
                return x
              })
            } else {
              this.back()
            }
            this.$nextTick(() => {
              this.getSourceImage(isReload)
            })
          }
        })
      },
      getSourceImage (isReload) {
        this.picture.images.forEach(item => {
          this.$store.dispatch({
            type: 'downFile',
            fileUuid: item.picUuid,
            th: 1
          }).then(res => {
            item.src = res
          })
        })
        if (!isReload) {
          this.picture.images = this.picture.images.map((item, index) => {
            this.$set(item, 'selected', index === Number(this.$route.query.picIndex))
            this.$set(item, 'index', index)
            return item
          })
          this.imageIndex = this.$route.query.picIndex
          this.pictureImage = this.picture.images[this.imageIndex]
          this.shotTime = this.$moment(this.pictureImage.shotTime).format('YYYY年MM月DD日')
        } else {
          console.log(this.imageIndex)
          this.picture.images = this.picture.images.map((item, index) => {
            this.$set(item, 'selected', index === this.imageIndex)
            this.$set(item, 'index', index)
            return item
          })
          this.pictureImage = this.picture.images[this.imageIndex]
          this.shotTime = this.$moment(this.pictureImage.shotTime).format('YYYY年MM月DD日')
        }
      },
      back () {
        const {pjId, name} = this.$route.query
        this.$router.push({name: 'picture', query: {pjId: pjId, name: name}})
      },
      prev () {
        if (this.imageIndex === 0) {
          return
        }
        this.imageIndex--
        this.pictureImage = this.picture.images[this.imageIndex]
        this.selectedPictureImage(this.pictureImage)
      },
      next () {
        if (this.imageIndex === this.picture.images.length - 1) {
          return
        }
        this.imageIndex++
        this.pictureImage = this.picture.images[this.imageIndex]
        this.selectedPictureImage(this.pictureImage)
      },
      selectedPictureImage (item) {
        this.picture.images = this.picture.images.map(image => {
          image.selected = false
          return image
        })
        item.selected = true
        this.imageIndex = item.index
        this.pictureImage = item
      },
      handlePicDate (data) {
        this.picDate = data
      },
      delPic () {
        this.$MessageBox({
          showClose: true,
          message: '是否确定删除该照片？',
          type: 'info',
          confirmHanler: () => {
            let data = {
              'picId': this.pictureImage.id
            }
            this.$axios({
              method: 'post',
              url: `${this.$site.videoServer}/api/videoPictureController/delete`,
              data: this.$qs.stringify(data, {indices: false})
            }).then(res => {
              if (res.data.success) {
                this.imageIndex = 0
                this.$message.success('删除成功！')
                this.getOneDayPics(true)
              }
            })
          }
        })
      },
      confirm () {
        let data = {
          'id': this.pictureImage.id,
          'picUuid': this.pictureImage.picUuid,
          'projectId': this.$route.query.pjId,
          'picName': this.picName,
          'shotTimeStr': this.picDate,
          'photographerName': this.manName,
          'photographerTelephone': this.manPhone
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/videoPictureController/update`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.success) {
            this.visible = false
            // this.imageIndex = 0
            this.$message.success('编辑成功！')
            this.getOneDayPics(true)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .zz_dialog_date{
    width:100%
  }
  .button_table{
    display: table;
    width: 100%;
    height: 100%;
    color: #00e8ff;
    font-weight: 700;
    .button_table_left{
      width: 30%;
      display: table-cell;
      cursor: pointer;
      font-size: 16px;
      &:hover {
        color: #f2f2f2;
      }
    }
    .button_table_center{
      width: 35%;
      display: table-cell;
      padding-left: 20px;
      cursor: pointer;
      font-size: 16px;
      &:hover {
        color: #f2f2f2;
      }
    }
    .button_table_right{
      padding-left: 20px;
      display: table-cell;
      cursor: pointer;
      font-size: 16px;
      &:hover {
        color: #f2f2f2;
      }
    }
  }
  .com-table{
    display: table;
    width: 100%;
    line-height: 30px;
    margin-bottom: 20px;
    .com-left{
      padding-left: 10px;
      display: table-cell;
      width: 80px;
      text-align: left;
    }
    .com-right{
      display: table-cell;
      padding-left: 10px;
      box-sizing: border-box;
      .building-table{
        text-align: center;
        th{
          padding: 0;
        }
        td{
          padding: 0;
        }
      }
    }
  }
  .picture_table{
    display: table;
    width: 100%;
    height: 100%;
    .picture_table_left{
      width: 55px;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
    .picture_table_content{
      display: table-cell;
      vertical-align: top;
      .picture_detail{
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        position: relative;
        overflow: hidden;
        img{
          height: 100%;
        }
        >p{
          position: absolute;
          bottom: 20px;
          left: 40px;
          color: #fff;
        }
      }
    }
    .picture_table_right{
      width: 55px;
      display: table-cell;
      vertical-align: top;
      position: relative;
    }
  }
  .project-next{
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    background: rgba(71, 159, 205, 0.1);
    cursor: pointer;
    box-shadow: 0 0 5px 2px rgba(71, 159, 205, 0.35) inset;
    position: absolute;
    margin-top: -55px;
    i{
      font-size: 26px;
      font-weight: bolder;
      color: #00e5ff;
    }
  }
  .project-not-allowed{
    cursor: not-allowed;
    opacity: 0.7;
  }
  .detail-table{
    tr{
      height: 25px;
    }
    th{
      color: $color-screen;
      text-align: left;
    }
    td{
      color: #fff;
    }
  }
  .list-content{
    margin: 20px 0 0 0;
    overflow: hidden;
    .list-child{
      width: 100%;
      height: 129px;
      overflow: hidden;
      margin-bottom: 20px;
      position: relative;
      box-sizing: border-box;
      >p{
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: #fff;
      }
      img{
        cursor: pointer;
      }
    }
    .list-child-select {
      border: 2px $color-screen solid;
    }
  }
  .list-next {
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: rgba(71, 159, 205, 0.1);
    color: $color-screen;
    cursor: pointer;
    box-shadow: 0 0 5px 2px rgba(71, 159, 205, 0.35) inset;
  }
  .defaultWidth{
    width: 450px;
    height: 30px;
    border: 1px #e2eaee solid;
    font-size: 0.85rem;
    padding: 7px 10px 6px 10px;
    color: #939997;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>
